<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <!-- 第一张card -->
      <chart-card>
        <template #chart-title> 今日销售额 </template>
        <template #chart-number>
          {{ chartData.salesToday }}
        </template>
        <template #charts>
          <div style="font-size: 10px; color: #112; padding: 8px 0">
            日同比 : {{ chartData.salesGrowthLastDay
            }}<svg
              t="1664447447247"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3688"
              width="12"
              height="12"
            >
              <path
                d="M507.649902 1015.81158L160.153845 618.161453a21.75049 21.75049 0 0 1 16.376839-36.080224h187.565987a22.262266 22.262266 0 0 0 21.750489-22.262266 1630.774944 1630.774944 0 0 0-12.538517-207.525259C350.022825 182.895773 268.138628 87.705395 204.934264 38.574877A21.75049 21.75049 0 0 1 223.102321 0.447548C588.766434 60.837143 665.532868 470.514012 679.350826 563.401397a21.238713 21.238713 0 0 0 21.494601 18.679832h170.677372a21.75049 21.75049 0 0 1 16.120951 36.080224L540.403581 1015.81158a21.75049 21.75049 0 0 1-32.753679 0z"
                p-id="3689"
                fill="#d81e06"
              ></path>
            </svg>
          </div>
          <div style="font-size: 10px; color: #112">
            月同比 : {{ chartData.salesGrowthLastMonth
            }}<svg
              t="1664447367481"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2625"
              width="12"
              height="12"
            >
              <path
                d="M529.143158 7.436293l347.212925 397.874796a21.748783 21.748783 0 0 1-16.375554 36.077393h-170.66398a21.492915 21.492915 0 0 0-21.492915 18.678367c-12.793402 92.624229-90.065549 502.268955-455.95684 562.909679a21.748783 21.748783 0 0 1-17.654895-38.380206c62.687669-49.126663 144.56544-144.309572 167.593564-313.694212a1571.285609 1571.285609 0 0 0 12.793402-207.508977 22.260519 22.260519 0 0 0-21.748783-22.260519H165.298811a21.748783 21.748783 0 0 1-16.375554-36.077393L496.39205 7.436293a21.748783 21.748783 0 0 1 32.751108 0z"
                p-id="2626"
                fill="#1afa29"
              ></path>
            </svg>
          </div>
        </template>
        <template #chart-footer>
          昨日销售额 ¥ {{ chartData.salesLastDay }}
        </template>
      </chart-card>
    </el-col>
    <el-col :span="6">
      <!-- 第二张card -->
      <chart-card>
        <template #chart-title> 今日订单 </template>
        <template #chart-number>
          {{ chartData.orderToday }}
        </template>
        <template #charts>
          <!-- 父子组件通信 -->
          <line-chart :data="chartData.orderTrend"></line-chart>
        </template>
        <template #chart-footer>
          昨日订单量 ¥ {{ chartData.orderLastDay }}
        </template>
      </chart-card>
    </el-col>
    <el-col :span="6">
      <chart-card>
        <template #chart-title> 今日交易用户数 </template>
        <template #chart-number>
          {{ chartData.orderUser }}
        </template>
        <template #charts>
          <bar-chart :data="chartData.orderUserTrend"></bar-chart>
        </template>
        <template #chart-footer> 退货率 {{ chartData.returnRate }}% </template>
      </chart-card>
    </el-col>
    <el-col :span="6">
      <chart-card>
        <template #chart-title> 累计用户数 </template>
        <template #chart-number>
          {{ chartData.usersTotal }}
        </template>
        <template #charts>
          <progress-chart></progress-chart>
        </template>
        <template #chart-footer>
          日同比:{{ chartData.userGrowthLastDay }}%<svg
            t="1664447367481"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2625"
            width="12"
            height="12"
          >
            <path
              d="M529.143158 7.436293l347.212925 397.874796a21.748783 21.748783 0 0 1-16.375554 36.077393h-170.66398a21.492915 21.492915 0 0 0-21.492915 18.678367c-12.793402 92.624229-90.065549 502.268955-455.95684 562.909679a21.748783 21.748783 0 0 1-17.654895-38.380206c62.687669-49.126663 144.56544-144.309572 167.593564-313.694212a1571.285609 1571.285609 0 0 0 12.793402-207.508977 22.260519 22.260519 0 0 0-21.748783-22.260519H165.298811a21.748783 21.748783 0 0 1-16.375554-36.077393L496.39205 7.436293a21.748783 21.748783 0 0 1 32.751108 0z"
              p-id="2626"
              fill="#1afa29"
            ></path>
          </svg>
          月同比:{{ chartData.userGrowthLastMonth }}%<svg
            t="1664447447247"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="3688"
            width="12"
            height="12"
          >
            <path
              d="M507.649902 1015.81158L160.153845 618.161453a21.75049 21.75049 0 0 1 16.376839-36.080224h187.565987a22.262266 22.262266 0 0 0 21.750489-22.262266 1630.774944 1630.774944 0 0 0-12.538517-207.525259C350.022825 182.895773 268.138628 87.705395 204.934264 38.574877A21.75049 21.75049 0 0 1 223.102321 0.447548C588.766434 60.837143 665.532868 470.514012 679.350826 563.401397a21.238713 21.238713 0 0 0 21.494601 18.679832h170.677372a21.75049 21.75049 0 0 1 16.120951 36.080224L540.403581 1015.81158a21.75049 21.75049 0 0 1-32.753679 0z"
              p-id="3689"
              fill="#d81e06"
            ></path>
          </svg>
        </template>
      </chart-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import ChartCard from "./ChartCard/index.vue";
import LineChart from './LineChart/index.vue';
import BarChart from './BarChart/index.vue';
import ProgressChart from './ProgressChart/index.vue'
defineProps(["chartData"]);
</script>

<style scoped>
</style>